<template>
  <!-- 疫苗记录 -->
  <view class="pages">
    <u-sticky class="sticky_c" offsetTop="0" :style="{ backgroundColor: scrollBgc ? '#54CEAB' : '' }">
      <h-line :height="statusHeight + 20"></h-line>
      <view class="navbar">
        <view class="nav_b">
          <u-icon name="arrow-left" size="22" color="#fff" @click="goBack"></u-icon>
        </view>
        <view class="page_title">疫苗接种表</view>
        <view class="nav_right">

        </view>
      </view>
      <view class="nav_bottom">
        <view class="left_box">
          <view style="margin-left: 20rpx;margin-bottom: 10rpx;">{{ userInfo?.user?.nickname }}</view>
          <text style="font-weight: 400;font-size: 28rpx;margin-left: 20rpx;">已出生{{ userInfo?.child?.age }}</text>
        </view>

      </view>
      <view class="round_edge"></view>
    </u-sticky>
    <!-- 疫苗列表 -->
    <view class="list_box" v-for="(item, index) in vaccinList" :key="index">
      <view style="font-size: 30rpx;color: #333333; margin-bottom: 10rpx;">{{ ageChange(item?.month_group) }}</view>
      <view class="list_cart" v-for="(i, n) in item?.group_list" :key="n">
        <view class="cart_left">
          <view class="left_top">
            <view>{{ i?.vaccine_config_name }}</view>
            <view v-if="i?.inoculability_type == 0" class="free">免费</view>
            <view v-if="i?.inoculability_type == 2" class="add_now">新增</view>
            <view v-if="i?.inoculability_type == 1" class="self_tag">自费</view>
            <view v-if="i?.inoculability_type != 2" class="frequency">{{ `第${i?.doses}/${i?.vaccine_config_total_doses}针`
            }}</view>
          </view>
          <view v-if="i?.inoculability_type != 2" class="left_main">{{ i?.vaccine_config_disease }}
          </view>
          <view v-else class="left_main">{{ i?.vaccine_config_desc }}</view>
          <view v-if="i?.inoculability_time" class="left_time">
            <text>实际接种时间：{{ i?.inoculability_time.split(' ')[0] }}</text>
          </view>
        </view>
        <!-- <view class="cart_right">
          <image v-if="i?.is_inoculability == 0" src="@/static/pediatrics/check_b.png" mode="scaleToFill" />
          <image v-else src="@/static/pediatrics/check_a.png" mode="scaleToFill" />
        </view> -->
        <image class="inoculate_ok" v-if="i.is_inoculability == 1" src="@/static/pediatrics/inoculate_ok.png"
          mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onReady, onShow } from '@dcloudio/uni-app'
import { navigateBack, navigateTo, formatDate, showToast } from '@/utils'
import { getUserChildInfoApi, getChildInoculationListApi } from '@/api/patients/index.js'
const scrollBgc = ref(false)
const statusHeight = ref(0)
//疫苗列表
const vaccinList = ref([])
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e?.statusBarHeight * 2
    },
  })
  getDocumentInfo()
})
const childId = ref(0)
const userId = ref(0)
onLoad((o) => {
  if (o?.childId) {
    childId.value = o?.childId
    userId.value = o?.userId
    getUserChildInfo()
    getList()
  }
})
//获取用户、孩子信息
const userInfo = ref({})
async function getUserChildInfo() {
  const res = await getUserChildInfoApi({ child_id: childId.value, user_id : userId.value })
  if (res?.code == 10000) {
    userInfo.value = res?.data
  }
}
// 获取高度
const heightList = ref([])
function getDocumentInfo() {
  const query = uni.createSelectorQuery()
  query?.selectAll('.list_cart')?.boundingClientRect((data) => {
    heightList.value = data
  })
    .exec()
}
//获取列表
async function getList() {
  const res = await getChildInoculationListApi({ child_id: childId.value, user_id : userId.value })
  if (res?.code == 10000) {
    vaccinList.value = res?.data
  }
}
//胎龄转换
const ageChange = (num) => {
  let ageValue = ''
  if (num == 0) {
    return ageValue = '出生当天'
  } else {
    if (num > 18) {
      return ageValue = `${num / 12}岁`
    } else {
      return ageValue = `${num}月龄`
    }
  }
}
// 返回
function goBack() {
  navigateBack()
}
</script>

<style lang="scss" scoped>
.sticky_c {
  top: 0 !important;
  background: url('@/static/pediatrics/vaccine_topbg.png') no-repeat;
  background-size: 100%;

  .navbar {
    padding: 0 20rpx;
    width: 100vw;
    height: 100rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;

    .page_title {
      font-weight: 400;
      font-size: 36rpx;
      color: #fff;
      margin-left: 11rpx;
      margin-right: 20rpx;
      line-height: 100rpx;
      text-align: center;
      flex: 1;
    }

    .nav_b {
      // width: 160rpx;
      height: 32rpx;
      padding-top: 30rpx;
    }

    .navbar_img {
      width: 32rpx;
      height: 32rpx;
      padding: 34rpx 0;
    }

    .nav_right {
      display: flex;
      align-items: center;

      .right_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 20rpx;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-bottom: 10rpx;
        }

        text {
          font-size: 26rpx;
          color: #FFFFFF;
        }
      }
    }
  }

  .nav_bottom {
    width: 750rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    margin-bottom: 30rpx;

    .left_box {
      width: 312rpx;
      padding: 20rpx 0;
      background: rgba(51, 51, 51, 0.1);
      border-radius: 16rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #FFFFFF;
    }

    .right_box {
      display: flex;
      align-items: center;

      .self_vaccin {
        width: 160rpx;
        height: 54rpx;
        background: rgba(255, 255, 255, 0);
        border-radius: 40rpx;
        border: 1rpx solid #FFFFFF;
        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
      }

      .add_vaccin {
        width: 160rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        border: 1rpx solid #FFFFFF;
        font-weight: 400;
        font-size: 30rpx;
        color: #2ABE93;
        text-align: center;
        line-height: 54rpx;
        margin-left: 20rpx;
      }
    }
  }

  .round_edge {
    width: 750rpx;
    height: 20rpx;
    background: #f6f6f6;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
  }
}

.pages {
  width: 750rpx;
  min-height: 100vh;
  background: #f6f6f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;

  .list_box {
    margin-bottom: 10rpx;

    .list_cart {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      position: relative;

      .left_top {
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;

        .free {
          width: 68rpx;
          height: 36rpx;
          background: #FFFFFF;
          border-radius: 6rpx 6rpx 6rpx 6rpx;
          border: 1rpx solid #999999;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          text-align: center;
          line-height: 36rpx;
          margin: 10rpx;
        }

        .frequency {
          width: 110rpx;
          height: 36rpx;
          background: #FFFFFF;
          border-radius: 6rpx 6rpx 6rpx 6rpx;
          border: 1rpx solid #999999;
          font-weight: 400;
          font-size: 26rpx;
          color: #999999;
          text-align: center;
          line-height: 36rpx;
        }

        // 新增
        .add_now,
        .self_tag {
          width: 68rpx;
          height: 36rpx;
          background: #40B7CB;
          border-radius: 6rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 36rpx;
          margin: 10rpx;
        }

        //自费
        .self_tag {
          background: #DE272A;
        }
      }

      .left_main {
        width: 500rpx;
        font-size: 28rpx;
        color: #666666;
        margin: 10rpx 0;
      }

      .left_time {
        font-size: 26rpx;
        color: #999999;
        display: flex;
        align-items: center;
      }

      .cart_right {
        image {
          width: 34rpx;
          height: 34rpx;
          z-index: 99;
        }
      }

      .inoculate_ok {
        width: 110rpx;
        height: 92rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }

      //删除
      .delete_item {
        width: 120rpx;
        background: #DE272A;
        border-radius: 0rpx 16rpx 16rpx 0rpx;
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: #FFFFFF;
        z-index: 100;
        transition: right 0.7s ease;
      }
    }
  }
}
</style>
